<template>
  <div class="song-list">
    <ul>
      <li class="item" @click="selectItem(song,index)" v-for="(song,index) in songs" :key="index">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(index)" v-text="getRankText(index)"></span>
        </div>
        <div class="content">
          <!--          歌曲名字-->
          <h2 class="name">{{song.name}}</h2>
          <!--          歌曲描述-->
          <p class="desc">{{getSongDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      songs: {
        type: Array,
        default: () => []
      },
      // 歌曲前面是否有排名
      rank: {
        type: Boolean,
        default: false
      }
    },
    created () {
    },
    methods: {
      // 获取歌曲排行图标
      getRankCls (index) {
        if (index < 3) {
          return `icon icon${index}`
        } else {
          return `text`
        }
      },
      // 获取歌曲排名数字
      getRankText (index) {
        if (index > 2) {
          return index + 1
        }
      },
      getSongDesc (song) {
        return `${song.singer} · ${song.album}`
      },
      // 点击歌曲的处理函数
      selectItem (item, index) {
        this.$emit('select', item, index)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~common/stylus/variable.styl"
  @import "~common/stylus/mixin.styl"
  .song-list
    .item
      display: flex
      align-items: center
      box-sizing: border-box
      height: 64px
      font-size: $font-size-medium

      .rank
        display: flex
        flex: 0 0 25px
        width: 25px
        margin-right: 30px
        text-align: center

        .icon
          display: inline-block
          width: 24px
          height: 24px
          background-size 24px 24px

          &.icon0
            bg-image('first')

          &.icon1
            bg-image('second')

          &.icon2
            bg-image('third')

        .text
          font-size: $font-size-large
          color: $color-theme

      .content
        flex: 1
        line-height: 20px
        overflow: hidden

        .name
          color: $color-text

        .desc
          margin-top: 4px
          color: $color-text-d
</style>
